<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二进制数组的应用</title>
</head>
<body>
    <h1>二进制数组的应用</h1>

    <script>
        // 1. Canvas图像处理
        function processCanvasImage() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 100;
            canvas.height = 100;

            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, 100, 100);
            const uint8Array = new Uint8ClampedArray(imageData.data.buffer);

            // 处理图像数据（例如：反转颜色）
            for (let i = 0; i < uint8Array.length; i += 4) {
                uint8Array[i] = 255 - uint8Array[i];     // R
                uint8Array[i + 1] = 255 - uint8Array[i + 1]; // G
                uint8Array[i + 2] = 255 - uint8Array[i + 2]; // B
                // uint8Array[i + 3] 是 alpha 通道
            }
        }

        // 2. WebSocket二进制数据
        function handleWebSocketBinary() {
            const ws = new WebSocket('ws://example.com');
            
            ws.binaryType = 'arraybuffer';
            
            ws.onmessage = function(event) {
                const arrayBuffer = event.data;
                const view = new DataView(arrayBuffer);
                
                // 解析二进制数据
                const value = view.getInt32(0);
                console.log('接收到的值:', value);
            };
        }

        // 3. 文件处理
        async function processFile(file) {
            const arrayBuffer = await file.arrayBuffer();
            const view = new DataView(arrayBuffer);

            // 读取文件头部信息
            const header = {
                signature: String.fromCharCode(
                    view.getUint8(0),
                    view.getUint8(1),
                    view.getUint8(2),
                    view.getUint8(3)
                ),
                version: view.getUint16(4, true),
                dataSize: view.getUint32(6, true)
            };

            return header;
        }

        // 4. 音频数据处理
        class AudioProcessor {
            constructor(audioBuffer) {
                this.buffer = audioBuffer;
                this.float32Array = new Float32Array(this.buffer);
            }

            normalize() {
                let max = 0;
                // 找到最大振幅
                for (let i = 0; i < this.float32Array.length; i++) {
                    max = Math.max(max, Math.abs(this.float32Array[i]));
                }
                // 归一化
                if (max > 0) {
                    for (let i = 0; i < this.float32Array.length; i++) {
                        this.float32Array[i] /= max;
                    }
                }
                return this.buffer;
            }
        }

        // 5. 网络请求
        async function fetchBinaryData(url) {
            const response = await fetch(url);
            const arrayBuffer = await response.arrayBuffer();
            
            // 处理二进制数据
            const view = new DataView(arrayBuffer);
            const result = {
                id: view.getUint32(0, true),
                timestamp: view.getFloat64(4, true),
                data: new Uint8Array(arrayBuffer, 12)
            };
            
            return result;
        }
    </script>
</body>
</html>